﻿/**
 *	html/monitor/center/device/panel_device.js
 *
 *	(C) 2014 Yuanjj
 *
 * 	history:
 * 		2014-07-15		create the file
 */

/**
 *	create device panel
 *
 *	@panel_center		[in] the center panel object
 *	@showflag			[in] the show flag ( "show" or "hide" )
 */
function create_device_panel( panel_center, showflag )
{
    var panel_c_device = new Ext.toolbar.Toolbar
    //var panel_c_device = new Ext.window.Window
    ({
         //title:"可选设备",
         id:"panel_c_device",
         // x:400, y:20, width:312, height:275, layout:{type:"column"},
         autoScroll:true, width:"100%",
         listeners:
         {
             render:_make_device_draggable,
             afterrender:function(){
                 g_device_type.each( function( rec ){
                     panel_c_device.add( _create_device_draggable_button( rec ) );
                 });

                 // hide device info panel
                 Ext.get(document).on('click', hide_device_info );
             }
         }
    });

    if ( "show" === showflag )
        panel_c_device.show();
    else
        panel_c_device.hide();

    panel_center.add_subpanel( panel_c_device );
}

/**
 *	make the device button draggable
 */
function _make_device_draggable()
{
    // make target can be dropped
    var target = Ext.dd.DDTarget.create( g_bg_div, g_dg_group );
}

/**
 *	add device panel to scene
 *
 *	@dev_id			[in] device id
 *	@dev_type		[in] device type
 *	@x				[in] the x value in scene panel
 *	@x				[in] the y value in scene panel
 *	@renderid		[in] render id
 */
function add_device_panel( dev_id, dev_type, x, y, renderid )
{
    var type_rcd	= g_device_type.findRecord( "type", dev_type );
    var dev_rcd		= g_device.findRecord( "dev_id", dev_id );
    var htmltext 	= _create_device_htmltext( type_rcd, dev_rcd );

    //var device_panel = new Ext.Img
    var device_panel = Ext.create
    ( "Ext.Img", {
         id:dev_id, renderTo:renderid, autoEl:"dev_img", padding:"0 0 0 0", margin:"0 0 0 0",
         draggable:{ constrain:true, constrainTo:renderid }, floating:true,
         x:x, y:y, c_x:0, c_y:0, html:htmltext,
         listeners:{
             move:on_panel_move,
             render:on_set_c_xy,
             el:{
                 click:device_single_click,
                 dblclick:device_double_click,
                 contextmenu:device_right_click,
             }
         }
    });

    device_panel.dev_type 	= dev_type;
    device_panel.dev_id 	= dev_id;
    device_panel.show();
}

/**
 *	create the device draggable button
 *
 *	@record			[in] the device type record
 *
 *	return
 *		the draggable device button object
 */
function _create_device_draggable_button( record )
{
    var type, name, img;

    type	= record.get( "type" );
    name	= record.get( "name" );
    img		= record.get( "img" );

    var htmltext =	"<div id=\"" + type + "\"style=\"text-align:center\">" +
                        "<img id=\"dev_icon_" + type + "\" src=\"" + img +
                        "\" style=\"height:" + g_icon_height + "px;width:" + g_icon_width + "px\" />" +
                    "</div>" +
                    "<div style=\"text-align:center\">" + name + "</div>";

    //var device_button = new Ext.panel.Panel
    var device_button = Ext.create
    ("Ext.panel.Panel", {
        id:"dev_" + type, html:htmltext, autoEl:"div", top:0, frame:true, width:100,
        listeners:{ render:_make_draggable }
    });

    return device_button;
}

/**
 *	make device type draggable
 */
function _make_draggable( )
{
    var toollist 	= this.el.select( "img[id^=dev_icon]" );

    // make target can be dragged
    Ext.each( toollist.elements, function( el ){
        var drag = new Ext.dd.DragSource
        ( this.id,
         {
             group:g_dg_group,
             centerFrame:true,
         });
        drag.afterDragDrop = on_after_drag_drop;
    });
}

/**
 *	after drag drop
 *
 *	@target			[in] the drop target
 *	@e				[in] the event object
 *	@id				[in] the id of drop element
 */
function on_after_drag_drop( target, e, id )
{
    var dev_type	= this.el.dom.parentNode.id;
    var dropEl 		= Ext.get( id );
    var dev_id		= _create_device_id();
    var x			= e.getX() - dropEl.getX();
    var y			= e.getY() - dropEl.getY();

    _create_new_device_panel( dev_id, dev_type, x, y, g_bg_div );
}

/**
 *	create a unique id for device
 */
var g_id = 0;
function _create_device_id()
{
    do
    {
        var panel_id = "dev_el_" + g_id++;
    } while( true === _check_device_id( panel_id ) );

    return panel_id;
}

/**
 *	create the new device panel in the scene panel
 *
 *	@id				[in] device id
 *	@type			[in] device type
 *	@x				[in] the x value in scene panel
 *	@x				[in] the y value in scene panel
 *	@renderid		[in] render id
 */
function _create_new_device_panel( id, type, x, y, renderid )
{
    if ( false === has_administrator_right() )
    {
        alert( "您没有管理员的权限！" );
        return;
    }

    add_device_panel( id, type, x, y, renderid );

    // add the deivce id into the store
    var	nor_x, nor_y;

    nor_x = x / g_scale;
    nor_y = y / g_scale;
    g_device.insert( 0, [[id, type, "", "", "", "", "", "", "", "", "", "未安装", nor_x, nor_y, 0]] );
}

/**
 *	create device htmltext
 *
 *	@type_rcd			[in] the device type record
 *	@dev_rcd			[in] the device record
 *
 *	return
 *		the html text
 */
function _create_device_htmltext( type_rcd, dev_rcd )
{
    var src			= (null === type_rcd) ? "" : type_rcd.get( "img" );
    var value		= (null === dev_rcd) ? "未安装" : dev_rcd.get("value");
    var	pos			= (null === dev_rcd) ? "" : dev_rcd.get("dev_pos");
    var append		= (null === dev_rcd) ? "" : type_rcd.get("append");
    var name		= (null === type_rcd) ? "未知设备" : type_rcd.get("name");

    var src_area	= "<div style=\"margin:0px;padding:10px 10px 0px 10px;text-align:center\">" +
                            "<img id=\"dev_src\" src=\"" + src + "\" style=\"" +
                                "height:" + g_icon_height + "px;" +
                                "width:" + g_icon_width + "px" +
                            "\"/>" +
                      "</div>";
    var value_area	= "<div id=\"dev_working\" style=\"margin:0px;text-align:center\">" +
                            "<tt id=\"dev_name\">" + name + ":</tt>" +
                            "<tt id=\"dev_value\">" + value + "</tt>" +
                            "<tt id=\"dev_append\">" + append + "</tt>" +
                      "</div>";
    var addr_area	= "<div id=\"dev_address\" style=\"margin:0px;text-align:center\">" +
                        "<tt>地点：</tt>" + "<tt>" + pos + "</tt>" +
                      "</div>";

    return src_area + value_area + addr_area;
}

/**
 *	call back function, after the panel moved
 *
 *	@obj		[in] the object
 *	@x			[in] the new x
 *	@y			[in] the new y
 *	@eOpts		[in] the operation object
 */
function on_panel_move( obj, x, y, eOpts )
{
    var dev_cmp		= Ext.getCmp( obj.id );
    var record		= g_device.findRecord( "dev_id", dev_cmp.dev_id );

    obj.c_x = (x + obj.getWidth() / 2) / g_scale;
    obj.c_y = (y + obj.getHeight() / 2) / g_scale;

    if ( null !== record )
    {
        record.set( "x", x / g_scale );
        record.set( "y", y / g_scale );
    }
}

/**
 *	call back function, set the device panel center x y, when rendering
 *
 *	@obj		[in] the object
 *	@eOpts		[in] the operation object
 */
function on_set_c_xy( obj, eOpts )
{
    obj.c_x = (obj.x + obj.getWidth() / 2) / g_scale;
    obj.c_y = (obj.y + obj.getHeight() / 2) / g_scale;
}

/**
 *	device single click call back
 *
 *	@e			[in] event object
 *	@a			[in] the element object
 */
var g_current_selected;
function device_single_click( e, a )
{
    e.stopEvent();

    /**
    var dev_dom	= Ext.getDom( this.id );
    alert( dev_dom.style.border );
    */

    var panel_center = g_panel_main.panel_monitor.panel_center;
    if ( "tree_panel_option" === panel_center.lasttree && "device" === panel_center.lastnode )
        return;

    if ( g_current_selected !== this.id )
        hide_device_info();
}

/**
 *	device double click call back
 *
 *	@e			[in] event object
 *	@a			[in] the element object
 */
function device_double_click( e, a )
{
    e.stopEvent();

    var panel_center = g_panel_main.panel_monitor.panel_center;

    if ( "tree_panel_option" === panel_center.lasttree && "device" === panel_center.lastnode )
        edit_device_property( this.id, panel_center );
    else
        show_device_info( this.id, panel_center );
}

/**
 *	device right click call back
 *
 *	@e			[in] event object
 *	@a			[in] the element object
 */
function device_right_click( e, a )
{
    e.stopEvent();

    var panel_center = g_panel_main.panel_monitor.panel_center;
    if ( "tree_panel_option" === panel_center.lasttree && "device" === panel_center.lastnode )
    {
        // show menu to delete device
    }
}
